<template>
  <el-card class="home__card-item home__activity">
    <div slot="header" class="home__card-title clearfix">
      <h3>客户活跃</h3>
      <div>
        <tabs v-if="currentTab === 'order'" v-model="currentYear" :tabs="years" size="mini" />
        截至: {{ currentDate }}
      </div>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{ summary.totalValidCustomerDesc }}</label>
          <span>{{ summary.totalValidCustomer }}</span>
        </div>
        <div class="home__card-content-sum__item">
          <label>{{ summary.totalOrderCustomerDesc }}</label>
          <span>{{ summary.totalOrderCustomer }}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <!-- 跟进阶段 -->
        <template v-if="currentTab === 'followUpStage'">
          <div class="home__activity__content">
            <div ref="echartfollowUpStage" class="home__activity__echart"></div>
          </div>
        </template>
        <!-- 频次分析 -->
        <template v-if="currentTab === 'frequency'">
          <div class="home__activity__content">
            <el-table :data="frequenciesData.frequenciesOneList" border size="mini" height="350px">
              <el-table-column show-overflow-tooltip prop="frequenciesDesc" label="频次" />
              <el-table-column show-overflow-tooltip prop="totalCustomer" label="客户数" />
              <el-table-column show-overflow-tooltip prop="totalOrder" label="订单数" />
              <el-table-column show-overflow-tooltip prop="totalOrderAmount" label="订单金额" />
            </el-table>
            <el-table :data="frequenciesData.frequenciesTwoList" border size="mini" height="350px">
              <el-table-column show-overflow-tooltip prop="frequenciesDesc" label="频次" />
              <el-table-column show-overflow-tooltip prop="totalCustomer" label="客户数" />
              <el-table-column show-overflow-tooltip prop="totalOrder" label="订单数" />
              <el-table-column show-overflow-tooltip prop="totalOrderAmount" label="订单金额" />
            </el-table>
          </div>
        </template>
        <!-- 订单排行 -->
        <template v-if="currentTab === 'order'">
          <div class="home__activity__content">
            <el-table :data="tableData" border size="mini" height="300px">
              <el-table-column show-overflow-tooltip prop="customerName" label="客户名称" />
              <el-table-column show-overflow-tooltip prop="totalOrder" label="订单金额" />
              <el-table-column show-overflow-tooltip prop="totalOrderAmount" label="订单数" />
            </el-table>
            <el-table :data="tableData2" border size="mini" height="300px">
              <el-table-column show-overflow-tooltip prop="customerName" label="客户名称" />
              <el-table-column show-overflow-tooltip prop="totalOrder" label="订单金额" />
              <el-table-column show-overflow-tooltip prop="totalOrderAmount" label="订单数" />
            </el-table>
          </div>
          <el-pagination :current-page="currentPage" background layout="prev, pager, next" :total="total" @currentChange="currentChange" />
        </template>
        <!-- 客户来源/星级 -->
        <template v-if="currentTab === 'customer'">
          <div class="home__activity__content">
            <div ref="echartPie" class="home__activity__echart"></div>
            <div ref="echartBar" class="home__activity__echart"></div>
          </div>
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import Tabs from './tabs.vue'
import moment from 'moment'
import { customerActivity } from '@/api/report/report'
export default {
  data() {
    return {
      summary: {},
      currentDate: moment().format('YYYY-MM-DD'),
      currentTab: 'followUpStage',
      tabs: [
          { name: '跟进阶段', value: 'followUpStage' },
        { name: '频次分析', value: 'frequency' },
        { name: '订单排行', value: 'order' },
        { name: '客户来源', value: 'customer' }
      ],
      currentYear: 'this',
      years: [
        { name: '今年', value: 'this' },
        { name: '去年', value: 'last' }
      ],
      currentPage: 1,
      total: 1000,
      frequenciesData: {},
      followUpStageList:[],
      tableData: [],
      tableData2: [],
      instances: {},
      echartData: [],
      echartCustomerRatingData:[]
    }
  },

  components: {
    Tabs
  },
  watch: {
    currentTab() {
      this.customerActivity(this.currentTab)
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize)
    })
  },
  created() {
    this.customerActivity('summary')
    this.customerActivity('followUpStage')
  },
  methods: {
    customerActivity(type) {
      var queryParams = {
        createTime: null
      }
      customerActivity(type, queryParams).then((response) => {
        console.log(response)
        if (type === 'summary') {
          this.summary = response.data.summary
        } else if (type === 'followUpStage') {
          this.followUpStageList = response.data.followUpStageList.map((item) => {
            (item.value = item.proportion),
              (item.name = item.followUpStage)
            return item
          })
          this.setfollowUpStageOptions()
        } else if (type === 'frequency') {
          this.frequenciesData = response.data.frequenciesData
        } else if (type === 'order') {
          var result =this.splitArray(response.data.orderList.list,5)
          this.tableData = result[0]
          this.tableData2 = result.length>1?result[1]:[]
          this.total = response.data.orderList.total
        } else if (type === 'customer') {
          this.echartData = response.data.sourceList.map((item) => {
            (item.value = item.proportion),
              (item.name = item.customerSource)
            return item
          })
           this.echartCustomerRatingData = response.data.customerRatingList.map((item) => {
            (item.value = item.proportion),
              (item.name = item.customerRating)
            return item
          })
          this.setOptions()
        }
      })
    },
    currentChange() { },
    getTableData() { },
     setfollowUpStageOptions() {
      this.$nextTick(() => {
        // 圆饼
        if (this.instances.followUpStage) {
          this.instances.followUpStage.dispose()
          this.instances.followUpStage = null
        }
        this.instances.followUpStage = echarts.init(this.$refs.echartfollowUpStage, null, { renderer: 'svg' });
        console.log(this.followUpStageList)
        this.instances.followUpStage.setOption({
          xAxis: {
            type: 'category',
            data: this.followUpStageList.map(e=> {
                return e.name
              })
          },
          yAxis: {
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '比例',
              type: 'bar',
              radius: ['30%', '60%'],
              padAngle: 2,
              data: this.followUpStageList.map(e=> {
                return e.total
              })
            }
          ]
        })
      })
    },
    setOptions() {
      this.$nextTick(() => {
        // 圆饼
        if (this.instances.pie) {
          this.instances.pie.dispose()
          this.instances.pie = null
        }
        this.instances.pie = echarts.init(this.$refs.echartPie, null, { renderer: 'svg' });
        console.log(this.echartData)
        this.instances.pie.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '比例',
              type: 'pie',
              radius: ['30%', '60%'],
              padAngle: 2,
              data: this.echartData.map(e=> {
                return {
                  name: e.name,
                  value: e.total
                };
              })
            }
          ]
        })
        // 柱状
        if (this.instances.bar) {
          this.instances.bar.dispose()
          this.instances.bar = null
        }
        this.instances.bar = echarts.init(this.$refs.echartBar, null, { renderer: 'svg' })
        this.instances.bar.setOption({
         tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '比例',
              type: 'pie',
              radius: ['30%', '60%'],
              padAngle: 2,
              data: this.echartCustomerRatingData.map(e=> {
                return {
                  name: e.name,
                  value: e.total
                };
              })
            }
          ]
          })
      })
    },
    handleResize() {
      Object.keys(this.instances).forEach((key) => {
        this.instances[key]?.resize?.()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home__activity {
  .home__activity__content {
    margin: 20px 0;
    display: flex;
    .home__activity__echart {
      width: 600px;
      height: 400px;
    }
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
